<template>
  <el-card style="max-width: 90%; margin: 0 auto">
    <template #header>
      <div class="card-header">
        <span style="font-size: 12px">查询条件</span>
      </div>
    </template>
    <el-form-item label="产品名称：">
      <el-input v-model="rolename" type="text" />
      <el-button @click="initTableData">查询</el-button>
    </el-form-item>
  </el-card>

  <br />
  <br />
  <!-- 采购入库 -->
  <div class="mb-4" style="max-width: 90%; margin: 0 auto">
    <el-button @click="procureFormVisible = true" v-if="purchase">
      <el-icon><Plus /></el-icon>&nbsp;采购入库
    </el-button>
    <el-button @click="saleFormVisible = true" v-if="sale">
      <el-icon><Minus /></el-icon>&nbsp;销售出库
    </el-button>
  </div>
  <br />
  <!-- 表格 -->
  <div style="max-width: 90%; margin: 0 auto">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="产品" width="700" />
      <el-table-column prop="total" label="库存" />
    </el-table>
    <br />
    <!-- 分页 -->
    <div class="pagination-container">
      显示第{{ start + 1 }}到第{{ start + tableData.length }}条记录，总共{{
        Counttotal
      }}条记录
      <el-pagination
        size="small"
        layout="prev, pager, next"
        :Counttotal="Counttotal"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- 采购入库 -->
  <Procure
    v-model:procureFormVisible="procureFormVisible"
    @refreshTable="initTableData"
  />
  <!-- 销售出库 -->
  <Sale
    v-model:saleFormVisible="saleFormVisible"
    @refreshTable="initTableData"
  />
  <!-- 编辑组件 -->
  <!-- <Edit
    v-model:editFormVisible="editFormVisible"
    :editFormData="selectedRow"
    @refreshTable="initTableData"
  /> -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Plus, Right, Minus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import http from "../../../util/http.js";
import Procure from "./components/procure.vue";
import Sale from "./components/sale.vue";

//新增属性定义
const procureFormVisible = ref(false);
const saleFormVisible = ref(false);
//编辑属性定义
const editFormVisible = ref(false);
const selectedRow = ref(null);
//分页属性定义
const tableData = ref([]);
const Counttotal = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const start = ref(0);
// 关联属性定义
const relatedFormVisible = ref(false);
const selectedRole = ref(null);

const relatedClick = (row) => {
  selectedRole.value = row;
  relatedFormVisible.value = true;
};
//角色属性定义
const rolename = ref("");
const role = ref({
  id: "",
  name: "",
  flag: "",
});
// 管理按钮
const sale = ref(false);
const purchase = ref(false);
const initButtonData = () => {
  const token = localStorage.getItem("token");
  http
    .post("/aggregation/aggregationrole", { token: token })
    .then((res) => {
      let result = res.data.rows;

      const flags = result.map((row) => row.flag);

      console.log(flags);
      // 遍历 flags 数组并设置 sale 和 purchase 的值
      flags.forEach((flag) => {
        if (flag === "purchase") {
          purchase.value = true;
        }
        if (flag === "sale") {
          sale.value = true;
        }
      });
    })
    .catch((error) => {
      ElMessage.error("加载数据失败：" + error);
    });
};
// 加载菜单
const initTableData = () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    name: rolename.value,
  };
  http
    .post("/aggregation/aggregationtable", params)
    .then((res) => {
      let result = res.data;
      Counttotal.value = result.Counttotal;
      start.value = (currentPage.value - 1) * pageSize.value;
      tableData.value = result.rows.map((row) => {
        return {
          name: row.material.name,
          total: row.product.total,
        };
      });
    })
    .catch((error) => {
      ElMessage.error("加载数据失败：" + error);
    });
};
// 分页功能
const handleSizeChange = (size) => {
  pageSize.value = size;
  initTableData();
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  initTableData();
};

//编辑功能
const openEditDialog = (row) => {
  editFormVisible.value = true;
  selectedRow.value = row;
};

//删除功能
const dialogVisible = ref(false);
const deleteRow = ref(null);
const confirmDelete = (row) => {
  deleteRow.value = row;
  dialogVisible.value = true;
};

const deleteClick = () => {
  http.post("/roles/delrole", { id: deleteRow.value.id }).then((res) => {
    if (res.code === 200) {
      ElMessage.success("删除成功");
      initTableData();
      dialogVisible.value = false;
    } else {
      ElMessage.error("删除失败");
    }
  });
};

onMounted(() => {
  initTableData();
  initButtonData();
});
</script>

<style scoped>
:deep .el-form-item__content {
  flex-wrap: nowrap;
}
.el-input {
  margin-right: 10px;
}
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
